<template>
	<view class="page-container">
		<!-- 匹配设置区域 -->
		<view class="match-settings">
			<view class="settings-header">
				<text class="title">匹配设置</text>
				<text class="subtitle">设置您的理想对象条件</text>
			</view>
			
			<view class="settings-form">
				<!-- 地区选择 -->
				<view class="form-item">
					<text class="label">期望地区</text>
					<view class="options-list">
						<view 
							class="option-item" 
							v-for="(item, index) in locationOptions" 
							:key="index"
							:class="{ active: settings.location.includes(item) }"
							@click="toggleLocation(item)"
						>
							{{ item }}
						</view>
					</view>
				</view>
				
				<!-- 年龄范围 -->
				<view class="form-item">
					<text class="label">年龄范围</text>
					<view class="range-picker">
						<view class="range-input">
							<input type="number" v-model="settings.ageMin" placeholder="最小年龄" />
							<text class="separator">至</text>
							<input type="number" v-model="settings.ageMax" placeholder="最大年龄" />
						</view>
					</view>
				</view>
				
				<!-- 身高范围 -->
				<view class="form-item">
					<text class="label">身高范围</text>
					<view class="range-picker">
						<view class="range-input">
							<input type="number" v-model="settings.heightMin" placeholder="最小身高" />
							<text class="separator">至</text>
							<input type="number" v-model="settings.heightMax" placeholder="最大身高" />
						</view>
					</view>
				</view>
				
				<!-- 收入范围 -->
				<view class="form-item">
					<text class="label">收入范围</text>
					<view class="range-picker">
						<view class="range-input">
							<input type="number" v-model="settings.incomeMin" placeholder="最低收入" />
							<text class="separator">至</text>
							<input type="number" v-model="settings.incomeMax" placeholder="最高收入" />
						</view>
					</view>
				</view>
				
				<!-- 婚姻状况 -->
				<view class="form-item">
					<text class="label">婚姻状况</text>
					<view class="options-list">
						<view 
							class="option-item" 
							v-for="(item, index) in marriageOptions" 
							:key="index"
							:class="{ active: settings.marriage.includes(item) }"
							@click="toggleMarriage(item)"
						>
							{{ item }}
						</view>
					</view>
				</view>
				
				<!-- 是否有房 -->
				<view class="form-item">
					<text class="label">是否有房</text>
					<view class="options-list">
						<view 
							class="option-item" 
							v-for="(item, index) in houseOptions" 
							:key="index"
							:class="{ active: settings.house.includes(item) }"
							@click="toggleHouse(item)"
						>
							{{ item }}
						</view>
					</view>
				</view>
				
				<!-- 是否有车 -->
				<view class="form-item">
					<text class="label">是否有车</text>
					<view class="options-list">
						<view 
							class="option-item" 
							v-for="(item, index) in carOptions" 
							:key="index"
							:class="{ active: settings.car.includes(item) }"
							@click="toggleCar(item)"
						>
							{{ item }}
						</view>
					</view>
				</view>
				
				<!-- 学历要求 -->
				<view class="form-item">
					<text class="label">学历要求</text>
					<view class="options-list">
						<view 
							class="option-item" 
							v-for="(item, index) in educationOptions" 
							:key="index"
							:class="{ active: settings.education.includes(item) }"
							@click="toggleEducation(item)"
						>
							{{ item }}
						</view>
					</view>
				</view>
				
				<!-- 职业要求 -->
				<view class="form-item">
					<text class="label">职业要求</text>
					<view class="options-list">
						<view 
							class="option-item" 
							v-for="(item, index) in careerOptions" 
							:key="index"
							:class="{ active: settings.career.includes(item) }"
							@click="toggleCareer(item)"
						>
							{{ item }}
						</view>
					</view>
				</view>
				
				<!-- 性格特点 -->
				<view class="form-item">
					<text class="label">性格特点</text>
					<view class="options-list">
						<view 
							class="option-item" 
							v-for="(item, index) in personalityOptions" 
							:key="index"
							:class="{ active: settings.personality.includes(item) }"
							@click="togglePersonality(item)"
						>
							{{ item }}
						</view>
					</view>
				</view>
				
				<!-- 生活习惯 -->
				<view class="form-item">
					<text class="label">生活习惯</text>
					<view class="options-list">
						<view 
							class="option-item" 
							v-for="(item, index) in lifestyleOptions" 
							:key="index"
							:class="{ active: settings.lifestyle.includes(item) }"
							@click="toggleLifestyle(item)"
						>
							{{ item }}
						</view>
					</view>
				</view>
				
				<!-- 兴趣爱好 -->
				<view class="form-item">
					<text class="label">兴趣爱好</text>
					<view class="options-list">
						<view 
							class="option-item" 
							v-for="(item, index) in hobbyOptions" 
							:key="index"
							:class="{ active: settings.hobbies.includes(item) }"
							@click="toggleHobby(item)"
						>
							{{ item }}
						</view>
					</view>
				</view>
			</view>
			
			<button class="match-btn" @click="startMatch">开始匹配</button>
		</view>
		
		<!-- 匹配动画 -->
		<view class="matching-animation" v-if="isMatching">
			<view class="animation-container">
				<view class="heart-pulse"></view>
				<view class="matching-text">正在寻找心动对象...</view>
				<view class="progress-text">已匹配 {{ matchProgress }}%</view>
			</view>
		</view>
		
		<!-- 匹配结果区域 -->
		<view class="match-results" v-if="showResults">
			<view class="results-header">
				<text class="title">匹配结果</text>
				<text class="subtitle">为您找到{{ matchResults.length }}位合适的人选</text>
			</view>
			
			<scroll-view class="results-list" scroll-y>
				<view class="result-card" v-for="(item, index) in matchResults" :key="index">
					<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
					<view class="info">
						<view class="basic-info">
							<text class="name">{{ item.name }}</text>
							<text class="age">{{ item.age }}岁</text>
							<text class="location">{{ item.location }}</text>
						</view>
						<view class="tags">
							<text class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{ tag }}</text>
						</view>
						<view class="match-rate">
							<text class="rate-text">匹配度</text>
							<text class="rate-value">{{ item.matchRate }}%</text>
						</view>
					</view>
					<view class="action-buttons">
						<button class="action-btn like" @click="handleLike(item)">喜欢</button>
						<button class="action-btn message" @click="handleMessage(item)">发消息</button>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			settings: {
				location: [],
				ageMin: '',
				ageMax: '',
				heightMin: '',
				heightMax: '',
				incomeMin: '',
				incomeMax: '',
				marriage: [],
				house: [],
				car: [],
				education: [],
				career: [],
				personality: [],
				lifestyle: [],
				hobbies: []
			},
			locationOptions: ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '西安'],
			marriageOptions: ['未婚', '离异', '丧偶'],
			houseOptions: ['有房', '无房'],
			carOptions: ['有车', '无车'],
			personalityOptions: ['开朗', '内向', '温柔', '独立', '幽默', '稳重', '浪漫', '务实'],
			lifestyleOptions: ['早睡早起', '夜猫子', '喜欢运动', '宅家', '喜欢社交', '独处', '喜欢旅行', '居家'],
			educationOptions: ['大专', '本科', '硕士', '博士'],
			careerOptions: ['IT/互联网', '金融/财务', '教育/培训', '医疗/健康', '公务员/事业单位', '其他'],
			hobbyOptions: ['运动', '音乐', '电影', '旅行', '美食', '摄影', '阅读', '游戏'],
			showResults: false,
			matchResults: [
				{
					name: '张小姐',
					age: 28,
					location: '北京',
					avatar: 'https://202231117.oss-cn-beijing.aliyuncs.com/图像1.jpg',
					tags: ['硕士', '金融', '喜欢旅行'],
					matchRate: 95
				},
				{
					name: '李小姐',
					age: 26,
					location: '上海',
					avatar: 'https://202231117.oss-cn-beijing.aliyuncs.com/图像2.jpg',
					tags: ['本科', 'IT', '喜欢运动'],
					matchRate: 92
				}
			],
			isMatching: false,
			matchProgress: 0,
			matchTimer: null
		}
	},
	methods: {
		toggleLocation(item) {
			const index = this.settings.location.indexOf(item)
			if (index === -1) {
				this.settings.location.push(item)
			} else {
				this.settings.location.splice(index, 1)
			}
		},
		
		toggleMarriage(item) {
			const index = this.settings.marriage.indexOf(item)
			if (index === -1) {
				this.settings.marriage.push(item)
			} else {
				this.settings.marriage.splice(index, 1)
			}
		},
		
		toggleHouse(item) {
			const index = this.settings.house.indexOf(item)
			if (index === -1) {
				this.settings.house.push(item)
			} else {
				this.settings.house.splice(index, 1)
			}
		},
		
		toggleCar(item) {
			const index = this.settings.car.indexOf(item)
			if (index === -1) {
				this.settings.car.push(item)
			} else {
				this.settings.car.splice(index, 1)
			}
		},
		
		togglePersonality(item) {
			const index = this.settings.personality.indexOf(item)
			if (index === -1) {
				this.settings.personality.push(item)
			} else {
				this.settings.personality.splice(index, 1)
			}
		},
		
		toggleLifestyle(item) {
			const index = this.settings.lifestyle.indexOf(item)
			if (index === -1) {
				this.settings.lifestyle.push(item)
			} else {
				this.settings.lifestyle.splice(index, 1)
			}
		},
		
		toggleEducation(item) {
			const index = this.settings.education.indexOf(item)
			if (index === -1) {
				this.settings.education.push(item)
			} else {
				this.settings.education.splice(index, 1)
			}
		},
		
		toggleCareer(item) {
			const index = this.settings.career.indexOf(item)
			if (index === -1) {
				this.settings.career.push(item)
			} else {
				this.settings.career.splice(index, 1)
			}
		},
		
		toggleHobby(item) {
			const index = this.settings.hobbies.indexOf(item)
			if (index === -1) {
				this.settings.hobbies.push(item)
			} else {
				this.settings.hobbies.splice(index, 1)
			}
		},
		
		startMatch() {
			this.isMatching = true
			this.matchProgress = 0
			this.showResults = false
			
			// 模拟匹配进度
			this.matchTimer = setInterval(() => {
				if(this.matchProgress < 100) {
					this.matchProgress += Math.floor(Math.random() * 15) + 5
					if(this.matchProgress > 100) this.matchProgress = 100
				} else {
					clearInterval(this.matchTimer)
					setTimeout(() => {
						this.isMatching = false
						// 将数据存储到本地
						uni.setStorageSync('matchSettings', this.settings)
						uni.setStorageSync('matchResults', this.matchResults)
						
						// 跳转到结果页面
						uni.navigateTo({
							url: './filterResults'
						})
					}, 500)
				}
			}, 300)
		},
		
		handleLike(item) {
			uni.showToast({
				title: '已喜欢' + item.name,
				icon: 'none'
			})
		},
		
		handleMessage(item) {
			uni.navigateTo({
				url: `/pages/chat/chat?id=${item.id}`
			})
		}
	},
	beforeDestroy() {
		if(this.matchTimer) {
			clearInterval(this.matchTimer)
		}
	}
}
</script>

<style lang="scss">
.page-container {
	min-height: 100vh;
	background: #f8f9fa;
	padding-bottom: 30rpx;
	
	.match-settings {
		background: #fff;
		border-radius: 0 0 30rpx 30rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		
		.settings-header {
			margin-bottom: 30rpx;
			
			.title {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
				display: block;
				margin-bottom: 8rpx;
			}
			
			.subtitle {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.form-item {
			margin-bottom: 30rpx;
			
			.label {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 16rpx;
				display: block;
			}
			
			.range-picker {
				.range-input {
					display: flex;
					align-items: center;
					background: #f8f9fa;
					padding: 16rpx 24rpx;
					border-radius: 12rpx;
					
					input {
						flex: 1;
						height: 60rpx;
						font-size: 28rpx;
						text-align: center;
					}
					
					.separator {
						margin: 0 20rpx;
						color: #999;
					}
				}
			}
			
			.options-list {
				display: flex;
				flex-wrap: wrap;
				gap: 12rpx;
				
				.option-item {
					padding: 12rpx 24rpx;
					background: #f8f9fa;
					border-radius: 30rpx;
					font-size: 24rpx;
					color: #666;
					
					&.active {
						background: #f69489;
						color: #fff;
					}
				}
			}
		}
		
		.match-btn {
			width: 100%;
			height: 80rpx;
			background: linear-gradient(135deg, #f69489, #ff6b6b);
			color: #fff;
			font-size: 32rpx;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 40rpx;
			
			&:active {
				transform: scale(0.98);
			}
		}
	}
	
	.matching-animation {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255,255,255,0.95);
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.animation-container {
			text-align: center;
			
			.heart-pulse {
				width: 100rpx;
				height: 100rpx;
				background: #ff69b4;
				position: relative;
				margin: 0 auto 40rpx;
				border-radius: 50%;
				animation: pulse 1.5s ease infinite;
				
				&::before, &::after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: #ff69b4;
					border-radius: 50%;
					opacity: 0.6;
					animation: pulse 1.5s ease infinite;
				}
				
				&::after {
					animation-delay: 0.5s;
				}
			}
			
			.matching-text {
				font-size: 32rpx;
				color: #333;
				margin-bottom: 20rpx;
				font-weight: 500;
			}
			
			.progress-text {
				font-size: 28rpx;
				color: #ff69b4;
				font-weight: 600;
			}
		}
	}
	
	@keyframes pulse {
		0% {
			transform: scale(0.8);
			opacity: 0.5;
		}
		50% {
			transform: scale(1.2);
			opacity: 0.2;
		}
		100% {
			transform: scale(0.8);
			opacity: 0.5;
		}
	}
	
	.match-results {
		background: #fff;
		border-radius: 30rpx;
		padding: 30rpx;
		margin: 20rpx;
		
		.results-header {
			margin-bottom: 30rpx;
			
			.title {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
				display: block;
				margin-bottom: 8rpx;
			}
			
			.subtitle {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.results-list {
			height: calc(100vh - 400rpx);
			
			.result-card {
				display: flex;
				padding: 20rpx;
				background: #f8f9fa;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				
				.avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 60rpx;
					margin-right: 20rpx;
				}
				
				.info {
					flex: 1;
					
					.basic-info {
						margin-bottom: 12rpx;
						
						.name {
							font-size: 32rpx;
							font-weight: 500;
							color: #333;
							margin-right: 16rpx;
						}
						
						.age, .location {
							font-size: 24rpx;
							color: #666;
							margin-right: 16rpx;
						}
					}
					
					.tags {
						display: flex;
						flex-wrap: wrap;
						gap: 8rpx;
						margin-bottom: 12rpx;
						
						.tag {
							font-size: 22rpx;
							color: #f69489;
							background: rgba(246, 148, 137, 0.1);
							padding: 4rpx 12rpx;
							border-radius: 20rpx;
						}
					}
					
					.match-rate {
						display: flex;
						align-items: center;
						
						.rate-text {
							font-size: 24rpx;
							color: #999;
							margin-right: 8rpx;
						}
						
						.rate-value {
							font-size: 28rpx;
							color: #f69489;
							font-weight: 500;
						}
					}
				}
				
				.action-buttons {
					display: flex;
					flex-direction: column;
					justify-content: center;
					gap: 12rpx;
					
					.action-btn {
						width: 120rpx;
						height: 60rpx;
						font-size: 24rpx;
						border-radius: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						
						&.like {
							background: #f69489;
							color: #fff;
						}
						
						&.message {
							background: #fff;
							color: #f69489;
							border: 2rpx solid #f69489;
						}
					}
				}
			}
		}
	}
}
</style>
